<template>
  <div>
    <el-row>
      <el-button type="primary" @click="addEntity">添加</el-button>
      <el-button type="danger" @click="deleteEntity">批量删除</el-button>
    </el-row>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="id" width="80"> </el-table-column>
      <el-table-column prop="rname" label="rname" width="150">
      </el-table-column>
      <el-table-column prop="rdesc" label="rdesc"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="entityEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteEntity(scope.row)"
            >删除</el-button
          >
          <el-button size="mini" type="warning" @click="allotMenuBut(scope.row)"
            >授权菜单</el-button
          >
          <el-button size="mini" type="info" @click="toRoleUserPage(scope.row)"
            >分配用户</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next, total,sizes"
      :total="total"
      :page-size="size"
      :page-sizes="pageSizes"
      @next-click="currentChange"
      @prev-click="currentChange"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination>

    <el-dialog title="用户" :visible.sync="entityDialogVisible" width="60%">
      <el-form :model="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="rname">
          <el-input v-model="form.rname"></el-input>
        </el-form-item>

        <el-form-item label="角色描述" prop="rdesc">
          <el-input v-model="form.rdesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="entityDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="授权菜单" :visible.sync="allotMenuDialogVisible">
      <div>
        <el-tree
          ref="tree"
          :data="menuList"
          :props="defaultProps"
          show-checkbox
          node-key="id"
          :default-checked-keys="roleMenuList"
        ></el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="allotMenuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAllotRoleMenu">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allotMenuDialogVisible: false, // 授权菜单的dilog
      tableData: [], // Model中原本是没有数据的\
      menuList: [],
      roleMenuList: [], // 没有角色拥有的权限
      defaultProps: {
        children: "children",
        label: "name",
      },
      entityDialogVisible: false,
      selectionId: [], // 定义一个数组用来接收用户勾选的数据
      total: 0, // 总条数,
      size: 5, //每页显示的条数
      current: 1, // 当前页
      pageSizes: [5, 10, 20],
      form: {
        rname: "admin",
        rdesc: "admin desc",
      },
      allotRoleMenu: {
        roleId: 1, // 授权的角色
        menuIdList: [], // 菜单的集合
      },
    };
  },

  // 自定义的函数
  methods: {
    toRoleUserPage(row) {
      this.$router.push("/roleUser/" + row.id);
    },
    saveAllotRoleMenu() {
      // 1.获取用户勾选的节点
      var checkedNodes = this.$refs.tree.getCheckedNodes();

      // 2.只需要保存菜单就可以
      for (var i = 0; i < checkedNodes.length; i++) {
        if (checkedNodes[i].type != 1) {
          this.allotRoleMenu.menuIdList.push(checkedNodes[i].id);
        }
      }
      console.log(this.allotRoleMenu);

      // 2.发送请求
      this.http
        .request({
          url: "allot/roleAddMenu",
          method: "POST",
          data: this.allotRoleMenu,
        })
        .then(({ data }) => {
          if (data.code == 200) {
            this.$message({
              message: "授权成功",
              type: "success",
            });
            this.allotMenuDialogVisible = false;
          }
        });
    },
    allotMenuBut(row) {
      // 1.显示给角色授权的diglog
      this.allotMenuDialogVisible = true;

      this.allotRoleMenu.roleId = row.id;

      // 2.查询所有的菜单
      this.getMenuList();

      // 3.查询当前角色拥有的菜单权限
      this.getRoleMenuIdList(row.id);
    },
    getRoleMenuIdList(roleId) {
      let app = this;
      this.http
        .request({
          url: "allot/getMenuIdListByRoleId/" + roleId,
          method: "GET",
        })
        .then(({ data }) => {
          if (data.code == 200) {
            app.roleMenuList = data.data;
          }
        });
    },
    getMenuList() {
      let app = this;
      this.http
        .request({
          url: "menu/tree/0",
          method: "GET",
        })
        .then(({ data }) => {
          app.menuList = data.data;
        });
    },
    sizeChange(size) {
      this.size = size;
      this.getEntityList();
    },
    currentChange(current) {
      // 1.修改当前页
      this.current = current;
      // 2.重新查询数据
      this.getEntityList();
    },
    addEntity() {
      this.entityDialogVisible = true;
    },

    // 单个删除，批量删除(不要传参)
    deleteEntity(row) {
      if (row.id) {
        this.selectionId = [];
        this.selectionId.push(row.id);
      }

      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.http({
            url: "role/remove",
            method: "POST",
            data: this.selectionId, // 传递是选择的数据
          }).then(({ data }) => {
            if (data.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getEntityList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    entityEdit(row) {
      this.http({
        url: "role/info/" + row.id,
        method: "GET",
      }).then(({ data }) => {
        this.form = data.data;
        // 3.显示对话框
        this.entityDialogVisible = true;
      });
    },

    getEntityList() {
      var app = this;
      this.http
        .request({
          url: "role/page",
          method: "POST",
          data: {
            current: this.current,
            size: this.size,
          },
        })
        .then(({ data }) => {
          app.tableData = data.data.records;
          app.current = data.data.current;
          app.size = data.data.size;
          app.total = data.data.total;
        })
        .catch((error) => {
          console.log(error);
        });
    },

    formSubmit() {
      var url = this.form.id ? "update" : "save";
      // 2.发送请求携带数据
      this.http({
        url: "role/" + url,
        method: "POST",
        data: this.form,
      }).then(({ data }) => {
        if (data.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.entityDialogVisible = false;
          this.getEntityList();
        }
      });
    },
  },
  mounted() {
    this.getEntityList();
  },
};
</script>

<style>
</style>